开胃菜：简单遮罩、形状
遮罩
教科书式的标准做法，需要考虑内容有滚动条的时候的在不同情况下的处理
1
2
3
4
5
6
7
8
9
| .mask{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background: rgba(0, 0, 0, 0.4);
z-index: 10;
}
|
border
简单看一下原理图就知道了
1
2
3
4
5
6
7
8
| .border-show{
width:0;
height:0;
border-top: 100px solid aqua;
border-right: 100px solid green;
border-bottom: 100px solid fuchsia ;
border-left: 100px solid chartreuse;
}
|
画一个三角形
1
2
3
4
5
6
7
8
| .border-shape-triangle{
width:0;
height:0;
border-top: 100px solid aqua;
border-right: 100px solid transparent;
/*border-bottom: 100px solid fuchsia ;*/
border-left: 100px solid transparent;
}
|
换个角度的三角形
1
2
3
4
5
6
7
8
| .border-shape-triangle-left{
width:0;
height:0;
border-top: 100px solid aqua;
border-right: 100px solid transparent;
/*border-bottom: 100px solid fuchsia ;*/
/*border-left: 100px solid transparent;*/
}
|
向右的大于号
1
2
3
4
5
6
7
| .border-shape-arrow{
width:100px;
height:100px;
border-right:20px solid blue;
border-top: 20px solid blue;
transform: rotate(45deg);
}
|
outline
伪元素:before或:after
box-shadow
background
background-*
mask-*
mix-blend-mode
难度提升：镂空遮罩
border
outline
box-shadow
background
background-*
mask-*
mix-blend-mode
Canvas
SVG
图片
DIV 拼接
正式挑战：镂空可点击
参考资料
- CSS实现镂空遮罩
- CSS实现镂空效果
- CSS实现镂空效果
- 遮罩层镂空效果的多种实现方法
- 遮罩层镂空效果的多种实现方法
- CSS镂空遮罩研究
- 用纯 CSS 实现镂空效果
- 幻术，一行代码实现镂空效果
- 用纯CSS实现镂空效果的示例代码
- [CSS遮罩CSS3 mask/masks详细介绍](CSS遮罩CSS3 mask/masks详细介绍)
- CSS遮罩——如何在CSS中使用遮罩
- 史上最强大的40多个纯CSS绘制的图形
- CSS3绘制各种形状的图形
